<template>
  <div>
    <div class="alert alert-dashed mgb20">
      <span class="h3">
        <span>订单号: </span>
        <span>{{order.orderNumber}}</span>
        <span style="margin-left:20px;">状态: </span>
        <span>{{OrderStatus[order.status]}}</span>
      </span>
      <div class="actions">
        <el-button v-if="order.status==2" type="warning" :loading="processing" @click="autoDispatchOrder()">自动处理</el-button>
        <el-button v-if="order.status==2" type="primary" :loading="processing" @click="processOrder()">开始处理订单</el-button>
        <el-button v-if="order.status==4||order.status==5" type="warning" :loading="processing" @click="autoDispatchItems()">自动配票</el-button>
        <el-button v-if="order.status==4||order.status==5" type="success" :loading="processing" @click="finishOrder()">处理完成</el-button>
        <el-button v-if="order.status==6||order.status==10" type="success" :loading="processing" @click="sendVoucher()">重发凭证</el-button>
        <el-button v-if="order.status==6||order.status==10" type="warning" @click="downloadVoucher(order.voucherFileUrl)">下载凭证</el-button>
        <el-button v-if="order.status==6||order.status==10" type="info" @click="downloadReceipt(order)">下载收据</el-button>
      </div>
    </div>
    <el-tabs v-model="tab" type="card">
      <el-tab-pane label="订单详情" name="order-details">
        <div class="box">
          <h3>订单信息</h3>
          <table class="box-body ui blue celled table">
            <tbody>
              <tr>
                <td>分销商</td>
                <td>渠道订单号</td>
                <td>创建时间</td>
                <td>付款时间</td>
                <td>出票时间</td>
              </tr>
              <tr>
                <td>{{order.dtbName}}</td>
                <td>{{order.channelOrderNumber}}</td>
                <td>{{order.submitOn}}</td>
                <td>{{order.payOn | placeholder('未支付')}}</td>
                <td>{{order.dispatchOn | placeholder('未出票')}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- confirm order -->
        <div class="box">
          <h3>预订清单</h3>
          <table class="box-body ui blue celled table">
            <thead>
              <tr>
                <th>产品</th>
                <th>使用日期</th>
                <th>时段</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{order.itemName}}</td>
                <td>{{order.useDate}}</td>
                <td>{{order.bookForm.timeSlotLabel}}</td>
                <td>{{order.price/100|currency('￥')}}</td>
                <td>{{order.amount}}</td>
                <td>{{order.total/100|currency('￥')}}</td>
                <td>
                  <el-button v-if="order.status>=2" type="success" size="small" @click="showBookingPage(order)">手动出票</el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="box">
          <h3>联系人信息</h3>
          <table class="box-body ui blue celled table">
            <thead>
              <tr>
                <th>联系人姓名</th>
                <th>联系人手机</th>
                <th>联系人邮箱</th>
                <th>其他备注信息</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{order.contact.name}}</td>
                <td>{{order.contact.phone}}</td>
                <td>{{order.contact.email}}</td>
                <td>{{order.contact.remark}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="box">
          <h3>订单日志</h3>
          <div class="box-body">
            <op-log :logs="order.logs" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="order.status >= 2" label="订单凭证" name="order-vouchar">
        <!-- <keep-alive> -->
        <order-voucher v-if="tab=='order-vouchar'" :order="order" />
        <!-- </keep-alive> -->
      </el-tab-pane>
      <el-tab-pane v-if="order.status >= 2" label="订单退款" name="order-refund">
        <!-- <keep-alive> -->
        <refund-apply v-if="tab=='order-refund'" :order="order" />
        <!-- </keep-alive> -->
      </el-tab-pane>
      <el-tab-pane v-if="order.status >= 2" label="预订单" name="order-purchase-orders">
        <!-- <keep-alive> -->
        <purchase-orders v-if="tab=='order-purchase-orders'" :order="order" />
        <!-- </keep-alive> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { Orders } from '@/store/api'
import { OrderStatus } from '@/constants'
import OpLog from '@/components/op-log'
import OrderVoucher from './order-voucher'
import RefundApply from './refund-apply'
import PurchaseOrders from './order-purchase-orders'

export default {
  components: {
    OpLog,
    OrderVoucher,
    RefundApply,
    PurchaseOrders
  },
  created() {
    this.initial()
  },
  data() {
    return {
      tab: 'order-details',
      OrderStatus: OrderStatus,
      processing: false,
      order: {
        bookForm: {},
        contact: {},
        logs: []
      }
    }
  },
  methods: {
    initial() {
      Orders.getOrder(this.$route.query.orderNumber).then(order => {
        this.order = order
      })
    },
    autoDispatchOrder() {
      this.processing = true
      Orders.autoDispatch(this.$route.query.orderNumber)
        .then(() => {
          this.initial()
          this.processing = false
          this.$message.success('自动处理订单请求已提交')
        })
        .catch(() => {
          this.processing = false
        })
    },
    processOrder() {
      this.processing = true
      Orders.process(this.$route.query.orderNumber)
        .then(() => {
          this.initial()
          this.processing = false
          this.$message.success('开始处理订单')
        })
        .catch(() => {
          this.processing = false
        })
    },
    autoDispatchItems() {
      this.processing = true
      Orders.autoDispatchItems(this.$route.query.orderNumber)
        .then(() => {
          this.initial()
          this.processing = false
          this.$message.success('自动处理凭证任务已发布')
        })
        .catch(() => {
          this.processing = false
        })
    },
    finishOrder() {
      this.processing = true
      Orders.processed(this.$route.query.orderNumber)
        .then(() => {
          this.initial()
          this.processing = false
          this.$message.success('订单处理完成')
        })
        .catch(() => {
          this.processing = false
        })
    },
    sendVoucher() {
      this.processing = true
      Orders.sendVoucher(this.$route.query.orderNumber)
        .then(() => {
          this.initial()
          this.processing = false
          this.$message.success('重发凭证请求已经提交')
        })
        .catch(() => {
          this.processing = false
        })
    },
    downloadVoucher(voucherUrl) {
      window.open(voucherUrl, '_parent')
    },
    downloadReceipt(order) {
      Orders.downloadReceipt(order.orderNumber).then(downloadUrl => {
        if (downloadUrl) {
          window.open(downloadUrl, '_blank')
        } else {
          this.$alert('当前订单还未制作收据', '下载失败', {type: 'warning'})
        }
      })
    },
    showBookingPage(order) {
      Orders.getMerchantItemCode(order.orderNumber).then(code => {
        window.open(
          'https://ticket2.usj.co.jp/t/tkt/select.do?t=' + code,
          '_blank'
        )
      })
    }
  }
}
</script>
